// 该文件专门用于创建整个应用的路由器
import VueRouter from 'vue-router'
// 引入组件
import About from "@/views/About";
import Home from "@/views/Home";
import News from "@/views/News";
import Message from "@/views/Message";
import Detail from "@/views/Detail";

// 创建并且暴露一个路由器
const router = new VueRouter({
    routes: [
        {
            name: 'guanyu',
            // 一级路由的 path 需要再加上斜杠 /
            path: '/about',
            component: About
        },
        {
            path: '/home',
            component: Home,
            // 二级路由的 path 不需要再加上斜杠 /
            children: [
                {path: 'news', component: News},
                {
                    path: 'message',
                    component: Message,
                    children: [
                        {
                            name: 'xiangqing',
                            path: 'detail',
                            component: Detail,
                            // props 的第一种写法，值为对象，该对象中的所有 key-value 都会以 props 的形式传递给 Detail
                            // props: {a:1, b:'hello'}

                            // props 的第二种写法，值为布尔值，若布尔值为真，就会把该路由组件收到的所有 params 参数，以 props 的形式传给 Detail 组件
                            // 但是这第二种写法的 props 对于 query 属性不起作用
                            // props: true

                            // props 的第三种写法
                            props($route) {
                                return {id:$route.query.id, title:$route.query.title}
                            }
                        }
                    ]
                }
            ]
        }
    ]
});

export default router